<template>
    <view>
        <view class="zcDetails-pl-cart" v-for="item in list" :key="item.id">
            <view class="zcDetails-pl-cart-top" style="margin-top: 30rpx">
                <image
                    :src="BaseUrl + item.user.avatar"
                    style="width: 72rpx; height: 72rpx; border-radius: 50%"
                    mode="scaleToFill"
                />
                <view class="zcDetails-pl-cart-top-text">
                    <view class="zcDetails-pl-cart-top-name">{{
                        item.user.nickname
                    }}</view>
                    <view class="zcDetails-pl-cart-top-time">{{
                        item.createtime_text
                    }}</view>
                </view>
            </view>
            <view class="zcDetails-pl-cart-content">
                {{ item.content }}
            </view>
            <view class="zcDetails-pl-cart-img">
                <image
                    v-for="item1 in item.images"
                    :key="item1"
                    :src="item1"
                ></image>
            </view>
        </view>
       <view style="position: fixed; bottom: 0; width: 100%;background-color: #fff" :class="platform == 'ios' || platform == 'devtools' ? 'iosP' : 'androidP'">
        <uv-input placeholder="请输入" v-model="value">
			<template v-slot:suffix>
				<uv-button
					@click="subText"
					text="发表评论"
					type="success"
					size="mini"
				></uv-button>
			</template>
		</uv-input>
       </view>
    </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            list: [],
            id: 0,
            getlistnum: 0,
            BaseUrl,
            value: "",
            platform: "",
        };
    },

    onLoad(options) {
        this.id = options.id;
        // 获取手机系统Android或者ios
        this.platform = uni.getSystemInfoSync().platform;
        console.log(this.platform);
    },

    onShow() {
        this.getlist();
    },

    methods: {
        async getlist() {
            await this.$request
                .get("api/wanlshop.find.comments/getList", {
                    id: this.id,
                })
                .then((res) => {
                    console.log(res.data, "评论");
                    this.list = res.data.list;
                    this.getlistnum = res.data.count;
                });
        },

        subText() {
            this.$request.post("api/wanlshop.find.comments/addData", {
                find_id: this.id,
                pid: 0,
                content: this.value
            }).then((res) => {
                if (res.code == 1) {
                    uni.showToast({
                        title: "评论成功",
                        icon: "none",
                    });
                    this.getlist();
                    this.value = "";
                }
            }).catch(err => {
                console.log(err);
            })
        },
    },
};
</script>
<style lang="scss" scoped>
.zcDetails-pl-cart {
    width: 94vw;
    margin: 0 3vw;
    background-color: #fff;
    border-radius: 36rpx;

    .zcDetails-pl-cart-top {
        height: 140rpx;
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;

        .zcDetails-pl-cart-top-text {
            margin-left: 20rpx;

            .zcDetails-pl-cart-top-name {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 26rpx;
                color: #121212;
            }

            .zcDetails-pl-cart-top-time {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                margin-top: 10rpx;
            }
        }
    }

    .zcDetails-pl-cart-content {
        padding: 0 30rpx 20rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 26rpx;
        color: #000;
        line-height: 48rpx;
        letter-spacing: 4rpx;
    }

    .zcDetails-pl-cart-img {
        width: 94vw;

        display: flex;
        justify-content: space-around;

        image {
            width: 200rpx;
            height: 200rpx;
        }
    }
}
.iosP {
    padding-bottom: constant(safe-area-inset-bottom);
    padding: 10rpx 20rpx env(safe-area-inset-bottom) 20rpx;
}
.androidP {
    padding: 10rpx 20rpx  20rpx 20rpx;
}
</style>